@use '../../../theme' as theme;

.package {
  position: relative;
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  padding: 10%;
  aspect-ratio: 1;
  box-sizing: border-box;
  border: 1px solid transparent;
  flex-direction: column;
  border-radius: #{theme.$border-radius}px;
  &:hover {
    border-color: var(--aya-color-border);
  }
  &::after {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: -25px 0 0 -25px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    content: '';
    opacity: 0;
    pointer-events: none;
    background: rgba(79, 177, 85, 0.2);
  }
  &.open-effect::after {
    animation: open-effect 0.3s ease-out forwards;
  }
}

@keyframes open-effect {
  0% {
    opacity: 1;
    transform: scale3d(0.1, 0.1, 1);
  }
  100% {
    opacity: 0;
    transform: scale3d(8, 8, 1);
  }
}

.package-icon {
  margin: 0 auto;
  width: 60%;
  overflow: hidden;
  border-radius: 20%;
  font-size: 0;
  img {
    width: 100%;
    aspect-ratio: 1;
  }
  margin-bottom: #{theme.$margin-x-s}px;
  &.disabled {
    filter: grayscale(100%);
  }
}

.package-label {
  white-space: nowrap;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 100%;
  font-size: #{theme.$font-size-s-m}px;
}
